<template>
	<view>

		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>

		<update ref="upd" :url="baseHttpUrl+'Mailbox/AiImage'" :formData="formData" @Successful="Successful"></update>


		<u-button @click="show = true">识别类型</u-button>

		<view v-if="imgesContn.length > 0">
			<view v-for="(tiem, index) in imgesContn" :key="index">
				<u-divider>识别内容</u-divider>
				<u-tag v-for="(tiem, s) in tiem" :key="s" :text="tiem" type="success" />
			</view>
		</view>
		<view v-for="(tiem, index) in netwreksrc" :key="index">
			<u-divider>图片转换</u-divider>
			<img width='100%' :src="baseHttpUrl+tiem" mode=""/>
		</view>
		
		<view v-for="(tiem, index) in imageuseInfo" :key="index" >
			<u-divider>图片信息</u-divider>
			<view  v-for="(ii, s) in tiem" :key="s" >
				{{ii}}
			</view>
		</view>

	</view>
</template>

<script>
	import update from '../../../../components/uViewUpload/Upload.vue';
	export default {
		components: {
			update,
		},
		data() {
			return {
				show: false,
				list: [{
						value: '1',
						label: '文字提取'
					},
					{
						value: '2',
						label: '二维码识别'
					},
					{
						value: '3',
						label: '图片效果加强'
					},
					{
						value: '4',
						label: '黑白上色'
					}, {
						value: '5',
						label: '转卡通'
					},
					{
						value: '6',
						label: '查看图片信息'
					}
				],
				formData: {},
				imgesContn: [],
				netwreksrc: [
					// 'cartoonImage/ddf62fae-9c43-4689-803b-efb9dbb3cef2.png',
					// 'cartoonImage/90e46113-9cf8-4821-8963-a73ef807a989.png'
				],
				imageuseInfo:[]
			};
		},
		mounted() {},
		methods: {
			confirm(e) {
				this.formData = e[0];

				setTimeout(() => {
					this.$refs.upd.submitImges()
				}, 500)
			},
			Successful(e) {
				if (!e) return;
				const {
					StatusCode,
					data
				} = e;
				// StatusCode === 200 && this.imgesContn.push(...data);
				this.formData.value === '1' && this.imgesContn.unshift(data)
				this.formData.value === '2' && this.imgesContn.unshift(String(data).split('\n'))
				this.formData.value === '6' && this.imageuseInfo.unshift(listTags(data))
				let set = new Set(['3', '4', '5']);
				set.has(this.formData.value) && this.netwreksrc.push(data)

				function listTags(tags) {
					const info = []
					for (const group in tags) {
						for (const name in tags[group]) {
							if (group === 'gps') {
								info.push(`${group}:${name}: ${tags[group][name]}`)
								// console.log(`${group}:${name}: ${tags[group][name]}`);
							} else if ((group === 'Thumbnail') && (name === 'type')) {
								// console.log(`${group}:${name}: ${tags[group][name]}`);
								info.push(`${group}:${name}: ${tags[group][name]}`)
							} else if ((group === 'Thumbnail') && (name === 'image')) {
								// console.log(`${group}:${name}: <image>`);
								info.push(`${group}:${name}: <image>`)
							} else if ((group === 'Thumbnail') && (name === 'base64')) {
								// console.log(`${group}:${name}: <base64 encoded image>`);
								info.push(`${group}:${name}: <base64 encoded image>`)
							} else if ((group === 'mpf') && (name === 'Images')) {
								// console.log(`${group}:${name}: ${getMpfImagesDescription(tags[group][name])}`);
								info.push(`${group}:${name}: ${getMpfImagesDescription(tags[group][name])}`)
							} else if (Array.isArray(tags[group][name])) {
								// console.log(`${group}:${name}: ${tags[group][name].map((item) => item.description).join(', ')}`);
								info.push(
									`${group}:${name}: ${tags[group][name].map((item) => item.description).join(', ')}`
								)
							} else {
								// console.log(`${group}:${name}: ${tags[group][name].description}`);
								info.push(`${group}:${name}: ${tags[group][name].description}`)
							}
						}
					}
					return info
				}

				function getMpfImagesDescription(images) {
					return images.map(
						(image, index) => `(${index}) ` + Object.keys(image).map((key) => {
							if (key === 'image') {
								return `${key}: <image>`;
							}
							if (key === 'base64') {
								return `${key}: <base64 encoded image>`;
							}
							return `${key}: ${image[key].description}`;
						}).join(', ')
					).join('; ');
				}
			},
			// listTags(tags) {
			// 	for (const group in tags) {
			// 		for (const name in tags[group]) {
			// 			if (group === 'gps') {
			// 				console.log(`${group}:${name}: ${tags[group][name]}`);
			// 			} else if ((group === 'Thumbnail') && (name === 'type')) {
			// 				console.log(`${group}:${name}: ${tags[group][name]}`);
			// 			} else if ((group === 'Thumbnail') && (name === 'image')) {
			// 				console.log(`${group}:${name}: <image>`);
			// 			} else if ((group === 'Thumbnail') && (name === 'base64')) {
			// 				console.log(`${group}:${name}: <base64 encoded image>`);
			// 			} else if ((group === 'mpf') && (name === 'Images')) {
			// 				console.log(`${group}:${name}: ${getMpfImagesDescription(tags[group][name])}`);
			// 			} else if (Array.isArray(tags[group][name])) {
			// 				console.log(
			// 					`${group}:${name}: ${tags[group][name].map((item) => item.description).join(', ')}`);
			// 			} else {
			// 				console.log(`${group}:${name}: ${tags[group][name].description}`);
			// 			}
			// 		}
			// 	}
			// }
		},

	};
</script>

<style></style>
